<template>
    <div class="dataAdd">
        <!-- {{form}} -->
        <el-cascader-panel @change="changeHandler" v-model="form.pca" :options="pca" :props='{label:"name",value:"name"}'></el-cascader-panel>
    
        <div style="width:50%;float:left;margin-top:10px;">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="确诊">
                    <el-input v-model="form.confirmed"></el-input>
                </el-form-item>
                <el-form-item label="重症">
                    <el-input v-model="form.severe"></el-input>
                </el-form-item>
                <el-form-item label="死亡">
                    <el-input v-model="form.dead"></el-input>
                </el-form-item>
                <el-form-item label="治愈">
                    <el-input v-model="form.cure"></el-input>
                </el-form-item>
                <el-form-item label="疑似">
                    <el-input v-model="form.suspected"></el-input>
                </el-form-item>
                <el-form-item label="境外输入">
                    <el-input v-model="form.outside"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click='toSave'>提交</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div style='float:right;width:45%;margin-top:10px;color:red;'>
            <div>温馨提示</div>
            <div>1. 先选择城市</div>
            <div>2. 再输入数据</div>
        </div>
    </div>
    
</template>

<script>
// 导入pca.json文件
import pca from '@/assets/pca.json'
// 导入axios
import axios from '@/http/axios'
// 导入qs
import qs from 'qs'

import moment from 'moment'
export default {
    data(){
        return {
            pca,
            form:{
                country:'中国'
            }
        }
    },
    //methods 专门用于存放数据
    methods:{
        //级联选择器选中最后一个地区时会触发的事件
        changeHandler(val) {
            console.log(val)
            //1.封装参数
            //2.xianxue javascript
            var params ={
                page:1,
                pageSize:100,
                province:val[0],
                city:val[1],
                area:val[2],
                inpoutTime:moment((new Date()).getTime()).format('YYYY-MM-DD')

            }
            console.log(params)
            axios({
                url:'http://39.96.21.48:8001/epidemic/pageQuery',
                method:'GET',
                params:params
            }).then((res)=>{
                if(res.data.data.total > 0){
                    this.form =res.data.data.list[0]
                }  
            })       
        },
        // 保存
      
        toSave(){
            // 1. 参数封装
            if (!this.form.id){
                this.form.province = this.form.pca[0]
                this.form.city = this.form.pca[1]
                this.form.area = this.form.pca[2]
            }
            // 2. 调用接口
            axios({
                url:'http://39.96.21.48:8001/epidemic/saveOrUpdate',
                method: 'POST',
                data:qs.stringify(this.form),
                contentType: 'application/x-www-form-urlencoded'
            }).then((res)=>{
                // 3. 成功时提示用户
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
                // 4. 跳转数据列表页面【路由跳转】
                this.$router.push({
                    path:'/data/dataList'
                })
            })
        }
    }
}
</script>